<template>
  <div id="AsideBar" :style="{height:height}">
    <!-- 上传头像 -->
    <div class="AsideBar_img">
      <img class="wer" :src="phote2" alt />
    </div>
    <!-- <div class="admad">admin</div>  更改字体颜色 -->
    <div class="AsideBar_admad">
      <p class="AsideBar_adm">{{username}}</p>
      <p class="AsideBar_ad">{{depart}}</p>
      <p class="AsideBar_ad">{{position}}</p>
    </div>
    <!-- 侧边栏 -->
    <el-row class="tac">
      <el-col :style="{height:heightbycebian}">
        <el-menu :default-active="defActive" @open="handleOpen" @close="handleClose" @select="handleSelect" background-color="#2E3A4E" text-color="#ffffff" active-text-color="#ffffff" class="el-menu">
          <el-menu-item v-for="(item,index) in asidlist" :index="String(index+1)" :key="index">
            <span class="icons">
              <img class="Aside_tubiao" :src="require('../assets/images/'+item.onerank[0].pic)" alt />
            </span>
            <span slot="title">{{item.onerank[0].name}}</span>
            <span class="divBymenu" v-if="click == index+1"></span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
import Utils from '../config/util.js'
export default {
  data() {
    return {
      asidlist: [],
      click: 1,
      height: '',
      heightbycebian: '',
      defActive: '1',
      imgsrc: 'Gerenxinxi-Woderenwu/u27.png',
      username: '',
      depart: '',
      position: '',
      phote2: require("../assets/images/cc4.jpg")
    }
  },
  created() {
    //console.log(JSON.parse(localStorage.getItem("message")),"hhhh")
    this.username = JSON.parse(localStorage.getItem("message")).Name;
    this.depart = JSON.parse(localStorage.getItem("message")).DepartName;
    this.asidlist =
      localStorage.getItem("rankList") != "undefined"
        ? JSON.parse(localStorage.getItem("rankList"))
        : [];
   // console.log(this.asidlist,"this.asidlist")
    this.defActive = localStorage.getItem("defActive")
      ? localStorage.getItem("defActive")
      : "1";
    this.click = localStorage.getItem("defActive")
      ? localStorage.getItem("defActive")
      : "1";
    this.height = document.documentElement.scrollHeight - 61 + "px";
    this.heightbycebian = document.documentElement.scrollHeight - 325 + "px";
   // console.log(this.asidlist[0].onerank[0].name)
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      localStorage.setItem("ceoTab", '0');
      console.log(key,keyPath)
      //console.log(this.asidlist[key-1].tworank[0],"index")
       this.$router.push({
              path: this.asidlist[key-1].tworank[0].url,
              query:{index:this.asidlist[key-1].onerank[0].menuId}
            });
      // for (var i = 0; i < this.asidlist.length; i++) {
      //   if (i + 1 == keyPath) {
      //     if (this.asidlist[i].onerank[0].name == "个人中心") {
      //       this.$router.push({
      //         path: "./PersonalCenterHmPg",
      //         query: { index: 1 }
      //       });
      //     }
      //     if (this.asidlist[i].onerank[0].name == "总裁管理") {
      //       this.$router.push({
      //         path: "./ManagerAuditHmPg",
      //         query: { index: 2 }
      //       });
      //     }
      //     if (this.asidlist[i].onerank[0].name == "财务管理") {
      //       this.$router.push({ path: "./FinanceHmPg", query: { index: 3 } });
      //     }
      //     if (this.asidlist[i].onerank[0].name == "行政管理") {
      //       this.$router.push({
      //         path: "./AdministrationHmPg",
      //         query: { index: 4 }
      //       });
      //     }
      //     if (this.asidlist[i].onerank[0].name == "人事管理") {
      //       this.$router.push({ path: "./PersonnelHmPg", query: { index: 5 } });
      //     }
      //     if (this.asidlist[i].onerank[0].name == "销售管理") {
      //       this.$router.push({ path: "./SalesHmPg", query: { index: 6 } });
      //     }
      //     if (this.asidlist[i].onerank[0].name == "采购管理") {
      //       this.$router.push({ path: "./PurchaseHmPg", query: { index: 7 } });
      //     }
      //     if (this.asidlist[i].onerank[0].name == "仓库管理") {
      //       this.$router.push({ path: "./WarehouseHmPg", query: { index: 8 } });
      //     }
      //     if (this.asidlist[i].onerank[0].name == "生产管理") {
      //       this.$router.push({
      //         path: "./ProductionHmPg",
      //         query: { index: 9 }
      //       });
      //     }
      //     if (this.asidlist[i].onerank[0].name == "产品管理") {
      //       this.$router.push({ path: "./ProductHmPg", query: { index: 10 } });
      //     }
      //     if (this.asidlist[i].onerank[0].name == "设备管理") {
      //       this.$router.push({
      //         path: "./EquipmentHmPg",
      //         query: { index: 11 }
      //       });
      //     }
      //     if (this.asidlist[i].onerank[0].name == "品质管理") {
      //       this.$router.push({ path: "./QualityHmPg", query: { index: 12 } });
      //     }
      //   }
      // }
      this.click = keyPath;
      localStorage.setItem("defActive", keyPath);
      Utils.$emit("updataBystore", "");
    }
  }
};
</script>

<style lang="scss" scoped>
@import '@/assets/scss/base.scss';
#AsideBar {
  background-color: $AsideBar_color;
  // height: 99%;
  padding: 0px;
  margin: 0px;
}
.el-menu {
  background-color: $AsideBar_color;
  padding: 0px;
  margin: 0px;
  border-right: solid 0px #e6e6e6;
  // width:100%;
}
.divBymenu {
  background-color: #d32a2a;
  width: 6px;
  margin: 0px;
  padding: 0px;
  margin-left: -20px;
  height: 100%;
  float: left;
}
.AsideBar_img {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  margin-left: 30px;
  margin-bottom: 60px;
  text-align: center;
  color: $white;
  cursor: pointer;
}
.AsideBar_img img {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}
.Aside_tubiao {
  width: 30px;
  height: 30px;
}
.icons {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.icons img {
  width: 24px;
  height: 24px;
}
.el-menu-item {
  height: 50px;
  padding: 0 0;
  line-height: 50px;
}
.AsideBar_admad {
  width: 100%;
  height: 60px;
  margin-top: 40px;
  color: $white;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}
.AsideBar_adm {
  width: 50px;
  height: 20px;
  line-height: 16px;
  margin-left: 60px;
  cursor: pointer;
}
.AsideBar_ad {
  height: 20px;
  font-size: $font-size-medium;
  line-height: 20px;
  display: inline-block;
  cursor: pointer;
}
.is-active {
  background-color: rgb(50,77,210) !important; /*颜色更改 */
}
.wer {
  margin-top: 35px;
}
</style>
